// TODO: 创建Vue类
import Complie from './Complie'
import observe from '../data/observe'
import Watcher from '../data/Watcher'

export default class Vue {
    constructor(options) {
        // 生命周期：beforeCreate
        options.beforeCreate.call(this.$data)
        // 1 存储参数
        this.$options = options || {}
        // 2 存储数据
        this.$data = options.data() || {}
        // 3 将 $data 中的数据转为响应式数据
        observe(this.$data)
        // 4 将 $data值 绑定到 Vue对象身上，并且与 $data 中的属性相结合，即访问 vm.属性 => vm.$data.属性
        this._initData()
        // 5 调用默认的watch
        this._initWatch()
        // 6 模板编译
        new Complie(options.el, this)
        // 生命周期：created
        options.created.call(this.$data)
    }

    _initData () {
        Object.keys(this.$data).forEach(key => {
            Object.defineProperty(this, key, {
                get () {
                    return this.$data[key]
                },
                set (newV) {
                    this.$data[key] = newV
                }
            })
        })
    }

    _initWatch () {
        // 1 获取需要监听的对象
        let watch = this.$options.watch
        // 2 获取监听key值
        Object.keys(watch).forEach(key => {
            // 监听对象 ，对象子项，回调函数
            new Watcher(this.$data, key, watch[key])
        })
    }

}